<template>
  <div>
    <div class="table-page-search-wrapper">
      <a-row :gutter="24" style="width: 1240px">
        <a-col :md="5" :sm="7" style="float: left;overflow: hidden;">
          <p>当前科室：病案管理一室</p>
        </a-col>
      </a-row>
      <a-button type="primary" @click="showModal">展示</a-button>
      <a-modal
        :title="title"
        :width="800"
        :visible="visible"
        :confirmLoading="confirmLoading"
        @ok="handleOk"
        @cancel="handleCancel"
        okText="保存并安排任务"
        cancelText="关闭"
      >
        <a-spin :spinning="confirmLoading" class="approval">
          <a-form :form="form">
            <p class="approval-p">病例超时申请单</p>
            <a-row :gutter="24">
              <a-col :md="16" :sm="12" style="float: left;overflow: hidden;"></a-col>
              <a-col :md="8" :sm="12" class="approval-fir">
                申请编号：
                <input class="approval-inp" />
              </a-col>
            </a-row>
            <a-row :gutter="24" class="approval-sec">
              <a-col :md="6" :sm="12">申请人基本信息</a-col>
            </a-row>
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="任务类名" hasFeedback>
              <a-input
                placeholder="请输入任务类名"
                v-decorator="['jobClassName', {rules: [{ required: true, message: '请输入任务类名!' }]}]"
              />
            </a-form-item>
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="cron表达式">
              <j-cron
                ref="innerVueCron"
                v-decorator="['cronExpression', {'initialValue':'0/1 * * * * ?',rules: [{ required: true, message: '请输入cron表达式!' }]}]"
                @change="setCorn"
              ></j-cron>
            </a-form-item>
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="参数" hasFeedback>
              <a-input placeholder="请输入参数" v-decorator="['parameter', {}]" />
            </a-form-item>
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="描述" hasFeedback>
              <a-input placeholder="请输入描述" v-decorator="['description', {}]" />
            </a-form-item>
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="状态">
              <a-radio-group buttonStyle="solid" v-decorator="[ 'status', {'initialValue':0}]">
                <a-radio-button :value="0">正常</a-radio-button>
                <a-radio-button :value="-1">停止</a-radio-button>
              </a-radio-group>
            </a-form-item>
          </a-form>
        </a-spin>
      </a-modal>
    </div>
    <company-profile />
  </div>
</template>

<script>
import { httpAction } from '@/api/manage'
import pick from 'lodash.pick'
import moment from 'moment'
import CompanyProfile from '../../components/knowlage/companyProfile'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import JEllipsis from '@/components/jeecg/JEllipsis'
import ExtendedMedicalRecordModal from './modules/ExtendedMedicalRecordModal'

export default {
  //这是医学图形库
  name: 'ExtendedMedicalRecord',
  components: {
    CompanyProfile,
    JEllipsis
  },
  data() {
    return {
      dateFormat: 'YYYY/MM/DD',
      monthFormat: 'YYYY/MM',
      value: 1,
      title: '审批',
      visible: false,
      model: {},
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      cron: {
        label: '',
        value: ''
      },
      confirmLoading: false,
      form: this.$form.createForm(this),
      validatorRules: {
        cron: {
          rules: [
            {
              required: true,
              message: '请输入cron表达式!'
            }
          ]
        }
      },
      url: {
        add: '/sys/quartzJob/add',
        edit: '/sys/quartzJob/edit'
      }
    }
  },
  created() {},
  methods: {
    moment,
    handleChange() {
      console.log('nifaye')
    },
    showModal() {
      this.visible = true
    },
    handleOk(e) {
      console.log(e)
      this.visible = false
    },
    handleCancel(e) {
      console.log(e)
      this.visible = false
    }
  }
}
</script>

<style lang="less" scoped>
@import '~@assets/less/common.less';
.table-page-search-wrapper {
  width: 100%;
  background-color: #fff;
  padding-top: 10px;
  padding-left: 32px;
  padding-bottom: 30px;
}
.classification-details {
  width: 100%;
  background-color: #fff;
  margin-top: 10px;
  padding-top: 0px;
  padding-left: 32px;
  padding-bottom: 30px;
}
.approval {
  color: #333;
  .approval-p {
    text-align: center;
    font-size: 24px;
    color: #333;
  }
  .approval-fir {
    color: #333;
    .approval-inp {
      width: 153px;
      border-left: none;
      border-right: none;
      border-top: none;
      border-radius: 0px;
    }
    .approval-inp:focus {
      border-bottom: 2px solid #38c3c8;
      border-left: none;
      border-right: none;
      border-top: none;
    }
    .approval-inp:hover {
      border-bottom: 2px solid #38c3c8;
    }
    .approval-inp::selection {
      background-color: #38c3c8;
      color: #fff;
    }
  }
  .approval-sec {
    color: #333;
    margin-top: 10px;
  }
}
</style>